<template>
  <li
    @mouseenter="mouseHandler(true)"
    @mouseleave="mouseHandler(false)"
    :style="{ backgroundColor: bgColor, color: myColor }"
  >
    <label :for="'check' + index">
      <input type="checkbox" :id="'check' + index" v-model="isComplete" />
      <span>{{ todo.title }}</span>
    </label>
    <button v-show="isShow" @click="delTodo">删除</button>
  </li>
</template>

<script>
// import { Todo } from '../types/todo';
import { defineComponent, ref, computed } from "vue";
export default defineComponent({
  name: "Item",
  props: ["todo", "deleteTodo", "index", "updateTodo"],
  setup(props) {
    const isShow = ref(false);
    const bgColor = ref("white");
    const myColor = ref("black");
    // 为了将来这个数据可读可写
    const isComplete = computed({
      set(val) {
        props.updateTodo(props.todo, val);
      },
      get() {
        return props.todo.isCompleted;
      }
    });
    const mouseHandler = flag => {
      if (flag) {
        bgColor.value = "pink";
        myColor.value = "white";
        isShow.value = true;
        return;
      }
      isShow.value = false;
      bgColor.value = "white";
      myColor.value = "black";
    };
    const delTodo = () => {
      if (window.confirm("确定要删除吗?")) {
        props.deleteTodo(props.index);
      }
    };
    return {
      mouseHandler,
      bgColor,
      myColor,
      isShow,
      delTodo,
      isComplete
    };
  }
});
</script>

<style>
li {
  list-style: none;
  padding: 20px 0 20px 20px;
}
</style>
